<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="员工" width="180" />
        <el-table-column prop="type" label="假别" width="180" />
        <el-table-column prop="day" label="请假时长">
            <template v-slot="scoped">
                {{ scoped.row.day }}天
            </template>
        </el-table-column>
        
        <el-table-column prop="stateTime" label="开始时间33333333333">

        <el-table-column prop="stateTime" label="开始时间222222222">
            <template v-slot="scoped">
                {{ moment(scoped.row.stateTime).format("yyyy-MM-DD hh:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
            <template v-slot="scoped">
                {{ moment(scoped.row.endTime).format("yyyy-MM-DD hh:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="desc" label="请假原因" />
        <el-table-column label="操作">
            <template v-slot="scoped">
                <el-button type="success" plain @click="audit(scoped.row.id)">
                    审批详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
        <el-table :data="gridData">
            <el-table-column property="userName" label="审批人" width="150" />
            <el-table-column property="audit" label="审批操作" width="200" />
            <el-table-column property="auditTime" label="审批时间">
                <template v-slot="scoped">
                    {{ moment(scoped.row.auditTime).format("yyyy-MM-DD hh:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column property="desc" label="审批意见" />

        </el-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios';
import moment from 'moment'
import { id } from 'element-plus/es/locales.mjs';

const audit = (id: number) => {
    axios.get("http://localhost:5180/api/Management/GetAudit", {
        params: {
            Id: id
        }
    })
        .then(res => {
            gridData.value = res.data
            dialogTableVisible.value = true
        })
}

const dialogTableVisible = ref(false)



const gridData = ref([])


const tableData = ref([]);


const Show = () => {
    axios.get("http://localhost:5180/api/Management/GetDefinition")
        .then(res => {
            tableData.value = res.data;
        })
}


onMounted(() => {
    Show();
})
</script>